<template>
  <Table filter v-bind="tableOpts" v-on="tableEvent">
    <template #operator>
      <div class="operator-wrap">
        <modifyInventory ref="dialogRef" @change="fetchCurrentTable" />
        <div style="display: inline-block" v-if="btnAuth">
          <el-upload
            :show-file-list="false"
            :headers="headers"
            :action="`${$apiHost}/material/inventory/import/execl`"
            :on-success="onSuccess"
            :on-error="onError"
            :before-upload="onBefore"
          >
            <el-button size="small" type="primary">
              导入库存
              <span v-if="loading" class="el-icon-loading"></span>
            </el-button>
          </el-upload>
        </div>
      </div>
    </template>
  </Table>
</template>

<script>
import { mapState } from "vuex";
import modifyInventory from "./components/modifyInventory.vue";
import tableMixins from "@/mixins/tableMixins.vue";
export default {
  name: "InventoryDetail",
  mixins: [tableMixins],
  components: {
    modifyInventory,
  },
  data() {
    return {
      loading: false,
      apiName: "getInventory",
      form: {
        productName: {
          tag: "el-input",
          label: "材料名称",
          value: "",
          props: {
            clearable: true,
            placeholder: "请输入材料名称",
          },
        },
        productCode: {
          tag: "el-input",
          label: "材料编码",
          value: "",
          props: {
            clearable: true,
            placeholder: "请输入材料编码",
          },
        },
        directoryId: this.formDirectoryId(),
        areaId: this.formArea(),
      },
    };
  },
  computed: {
    ...mapState(["userData"]),
    btnAuth() {
      const { authority = [] } = this.userData || {};
      return authority.includes(192);
    },
    headers() {
      const token = this.tokenv3 || this.$quinn.getStorage("tokenv3");
      return {
        token,
      };
    },
  },
  methods: {
    onBefore(e) {
      this.loading = true;
    },
    onError(e) {
      this.loading = false;
    },
    onSuccess(res) {
      this.$message("导入成功");
      this.loading = false;
    },
    handleAction(opts, row) {
      if (opts === "modifyCount") this.showDialog(opts, row);
    },
  },
};
</script>

<style lang="less" scoped></style>
